{% raw %}
<script type="text/x-template" id="id-collection-product-temp">
  {% if theme_config.global.product_size == "1" %}
  {% assign product_size = "11" %}
  {% elsif theme_config.global.product_size == "2" %}
  {% assign product_size = "43" %}
  {% elsif theme_config.global.product_size == "3" %}
  {% assign product_size = "23" %}
  {% endif %}

   

  {%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
  {%- endcapture -%}
  {% for product in products %}

   {%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if collection_product_url == '1' -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}

 {%- capture supplier_name -%}
  {% if theme_config.global.supplier_display_selection == '1' %}
    <div class="supplier_name">{{ theme_config.global.supplier_name }}</div>
  {% elsif theme_config.global.supplier_display_selection == '2' %}
    <div class="supplier_name">{{ product.vendor }}</div>
  {% endif %}
{%- endcapture -%}

  <li class="block_collection_product">
      <div class="product_pic {% if theme_config.global.product_move_two %}{% if product.images[1].src %}product_img_hover{% endif %}{% endif %}">
        
          <a class="product_img plugin-product_item-img_box" data-scale="{{ product_size }}" href="{{product_handle}}">
              <img class="default_img" data-src="{{ product.src }}" alt="{{product.image.alt | default : product.title }}" src="{{product.src | lazy_img_url}}">
              {% if theme_config.global.product_move_two %}
              {% if product.images[1].src %}
              <img class="hover_img"  data-src="{{ product.images[1].src }}" alt="{{product.images[1].alt | default : product.title }}" src="{{'empty_loading.png' | public_asset_abs_dir_url}}">
              {% endif %}
              {% endif %}
          </a>
          {%- if product.available == 0 -%}
            <div class="soldout">{{ lang.general.sold_out }}</div>
          {%- endif -%}
  
          {% if theme_config.global.product_discount_label and product.variant.price > 0 %}
            {% if product.variant.price < product.variant.compare_at_price %}
              {% if theme_config.global.product_discount_label_type == 1 %}
                {% assign price = product.variant.compare_at_price | minus: product.variant.price %}
              {% else %}
                {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
              {% endif %}
              {% if price > 0 %}
                <div class="discount_tag {{ theme_config.global.discount_label_style }}">
                  <div class="discount_tag_graphics"></div>
                  <div class="discount_tag_name">
                    {%- if theme_config.global.product_discount_label_type == 1 -%}
                      {{ price | roundMoney }} <span>OFF</span>
                    {%- else -%}
                      {{ price }}%
                      <span>OFF</span>
                    {%- endif -%}
                  </div>
                </div>
              {% endif %}
            {% endif %}
          {% endif %}
          <div class="product_tag_list">
              {% if theme_config.global.product_preview %}
              <a class="product_view" data-handle="{{ product.handle }}" data-from="{{product.data_from | default:data_from}}" href="javascript:void(0)"><svg class="" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8.6 1.9a.3.3 0 0 0-.3-.3h-.6a.3.3 0 0 0-.3.3v5.5H1.9a.3.3 0 0 0-.3.3v.6a.3.3 0 0 0 .3.3h5.5v5.5a.3.3 0 0 0 .3.3h.6a.3.3 0 0 0 .3-.3V8.6h5.5a.3.3 0 0 0 .3-.3v-.6a.3.3 0 0 0-.3-.3H8.6V1.9z"></path></svg></a>
              {% endif %}
          </div>
      </div>
      <div class="block_product_name {% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
          <a class="{{text_ellipsis}}" href="{{product_handle}}">{{ product.title }}</a>
      </div>
      {{ supplier_name }}
      <div class="product_price notranslate">
        <span class="general_buying-color">{{ product.variant.price | money }}</span>
        {% if product.variant.compare_at_price != 0 %}
        <span class="product_oldprice general_original-color">{{ product.variant.compare_at_price | money }}</span>
        {% endif %}
      </div>
      {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %} 
      {% if product.variant.price < product.variant.compare_at_price %}
      <div class="product_price" style='color:var(--discount_tag_color);background-color:var(--discount_tag_bg);margin-top: 4px;display: flex;justify-content:flex-start;'>
          {{lang.general.save}}
          {% if theme_config.global.product_discount_label_style == 2 %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
          <span class="notranslate">{{price}}%</span>
          {% else %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
          <span class="notranslate">{{price | money}}</span> 
          {% endif %}
      </div>
      {% endif %}
      {% endif %}

      {%- unless theme_config.global.product_is_score == false -%}
      {% if product.star > 0 %}
      {% assign width = product.star | default:0 | divided_by: 5 | times:100 %}
      <div class="moi-start-warp" style="margin-top:10px;justify-content: flex-start;">
        <div class="comment-star-warp">
          <div class="comment-star-base">
            {% for index in (1..5) %}
            <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7121" width="20" height="20">
              <path
                d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z"
                fill="{{theme_config.global.product_score_uncheck_color | default:'#bbbbbb'}}" p-id="7122"></path>
            </svg>
            {% endfor %}
          </div>
      
          <div class="comment-star-base comment-star-warp-choose" style="width:{{width}}%">
            {% for index in (1..5) %}
            <svg t="1632626527998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7121" width="20" height="20">
              <path
                d="M512 0l122.88 352.96 389.12 2.752-300.8 238.08 118.272 380.032L512 747.392l-329.6 226.496L293.312 588.8 0.32 355.776l389.12-2.752z"
                fill="{{theme_config.global.product_score_selected_color | default:'#F8AD6B'}}" p-id="7122"></path>
            </svg>
            {% endfor %}
          </div>
        </div>
        {% if theme_config.global.product_is_score_number == 1 %}
          <span>(<span>{{ product.star }}</span>)</span>
        {% elsif theme_config.global.product_is_score_number == 2 and product.comment_total_count != 0 %}
          <span>(<span>{{ product.comment_total_count }}</span>)</span>
        {% else %}
          <span>{{ product.star }}</span><span>(<span>{{ product.comment_total_count }}</span>)</span>
        {% endif %}
      </div>
      {% endif %}
      {%- endunless -%}
      {% if theme_config.global.product_img_list_type != 0 %}
          <div class="block_product_img_list noRender">
              <div class="img_list" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
              {% if theme_config.global.product_img_list_type == "1" %}
                  {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
                  {% assign isFindSuccess = false %}
                  {% if product.variants.size > 0 %}
                      {% for option in product.options %}
                          {% assign option_name = option.name | downcase %}
                          {% assign hasOptionName = colorOptions contains option_name %}
                          {% if hasOptionName and isFindSuccess == false %}
                              {% assign isFindSuccess = true %}
                              {% assign optionIndex = option.position | plus: 1 %}
                              {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                              {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                              {% assign optionValues = "" %}
                              {% assign isSelectOptions = "" %}
                              
                              {% for optionValueItem in option.values %}
                                  {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                              {% endfor %}
                              {% for variant in product.variants %}
                                  {% assign varinatTitle = variant[optionTitle] | downcase %}
                                  {% assign variantValue = variant[optionValueTitle] | downcase %}
                                  {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                                  {% assign hasValue = optionValues contains variantValue %}
                                  
                                  {% if hasVarinatTitle != '' and  hasValue != '' %}
                                      {% unless isSelectOptions contains variantValue %}
                                          {% if variant.image %}
                                              {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                                              <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"></a>
                                          {% endif %}
                                      {% endunless %}
                                  {% endif %}
                              {% endfor %}
                              
                          {% endif %}
                      {% endfor %}
                  {% endif %}

                  {% elsif theme_config.global.product_img_list_type == "2" %}
                      {% if product.variants.size > 0 %}
                          {% for imgsItem in product.images %}
                              <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"></a>
                          {% endfor %}
                      {% endif %}
                  {% endif %}
                  <div class="morNumber"></div>
              </div>
          </div>
      {% endif %}
  </li>
  {% endfor %}
</script>
{% endraw %}